import React, { FC, useEffect, useRef, useState } from 'react'
import {inject,observer} from 'mobx-react'
import {Tag }from 'antd'
import { useNavigate } from 'react-router-dom'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile'
import  {mockRequest}  from './mock'
let t:any=null
let count:any=1

const BookList:FC<any>=({
    book
})=> {
    const {getBookList,bookList}=book
    const navigate = useNavigate()
    const obj=useRef<any>()
    
    
    useEffect(()=>{
    getBookList(1)
    },[])
     //点击查看，携带——id进入详情页
  const gotoDetailed=(item:any)=>{
    navigate('/detailed/bookDetailed/'+item.skuId)
  }
  //实现懒加载 
//   let [data, setData] = useState<any>([...bookList])
// window.addEventListener( 'scroll', function() {
// let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//     if(scrollHeight > clientHeight && Math.round(scrollTop) + clientHeight === scrollHeight){
//         clearTimeout(t);
//         t = setTimeout(function() {
//             console.log(888);
//             count++
//             if(count<=6){
//                 getBookList(count)
//             }
           
//             //实现懒加载
            
//         }, 2000)
//     }
// })
//   const [data, setData] = useState<any>([])
//   const [hasMore, setHasMore] = useState(true)
//   async function loadMore() {
//     const append = await mockRequest({getBookList,bookList})
//     setData((val: any) => [...val, ...append])
//     setHasMore(append.length > 0)
//   }
//   const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
//     return (
//       <>
//         {hasMore ? (
//           <>
//             <span>Loading</span>
//             <DotLoading />
//           </>
//         ) : (
//           <span>--- 我是有底线的 ---</span>
//         )}
//       </>
//     )
//   }

  return (
    <div style={{width:"100%",marginTop:"0.05rem"}} ref={obj}
    >
        {
            
            bookList&&bookList.map((item: any,index: any)=>(
                
                <div key={index} style={{width:"100%",height:"1rem",marginBottom:"0.1rem",display:"flex",justifyContent:"start",color:"#333",fontSize:"0.16rem",background:"#fff",padding:"0 .1rem",borderRadius:"0.1rem",boxShadow:" 0.05rem 0.02rem 0.1rem #9E9E9E"}}
                onClick={()=>gotoDetailed(item)}
                >
                    <img src={item.img} alt=""style={{width:"1rem",height:"auto",marginRight:"20px"}} />
                    <div 
                    style={{width:"2.3rem",padding:"0.1rem 0"}}
                    >
                        <p style={{width:"100%",whiteSpace:"normal",overflow:"hidden",textOverflow:"ellipsis",height:"0.2rem",lineHeight:"0.2rem"}}>{item.name}</p>
                         <p style={{display:"flex",justifyContent:"space-between"}}>
                             <span style={{display:"block"}}> {
                            item.subTitle?<Tag color={'red'}>
                            {item.subTitle}</Tag>:<Tag color={'#333'}>推荐</Tag>
                       }</span>
                       <span style={{display:"block",fontSize:"0.14rem",color:"#666"}}>
                           {item.wl_price*10}人 看过
                       </span>
                         </p>
                    </div>
                </div>
                 
                
                
            ))
        }
           {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                    <InfiniteScrollContent hasMore={hasMore} />
                    </InfiniteScroll> */}
    </div>
  )
}
export default inject('book')(observer(BookList))
